<template>
	<view class="login-container">
        <view class="login-logo">
            <image :src="imgUrl + '/img/img14112418a8c533938.png'" mode=""/>
        </view>
		<view class="login-form">
			<view class="form-item">
				<input 
					class="form-input" 
					type="text" 
					placeholder="请输入账号" 
					v-model="loginForm.username"
				/>
			</view>
			<view class="form-item">
				<input 
					class="form-input" 
					type="password" 
					placeholder="请输入密码" 
					v-model="loginForm.password"
				/>
			</view>
            <view class="register-text" @click="goToRegister">注册</view>
			<button class="login-button" @click="handleLogin">登录</button>
		<view class="else-login">其他登录方式</view>
        <view class="else-login-wx">
            <image
            :src="imgUrl + '/img/wx.png'"
            mode="scaleToFill"
        />
        微信
        </view>
        </view>
	</view>
</template>

<script>
	import { authAPI } from '../../static/indexAPI.js';
	import config from '@/static/config.js';
	
	export default {
		data() {
			return {
				loginForm: {
					username: '',
					password: ''
				},
				imgUrl: config.imgUrl
			}
		},
		methods: {
			// 验证手机号格式
			isValidPhone(phone) {
				const phoneRegex = /^1[3-9]\d{9}$/;
				return phoneRegex.test(phone);
			},
			async handleLogin() {
				// 简单验证
				if (!this.loginForm.username) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				
				// 验证手机号格式
				if (!this.isValidPhone(this.loginForm.username)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				
				if (!this.loginForm.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				
				// 调用登录接口
				try {
					console.log('开始登录请求，请求参数：', {
						username: this.loginForm.username,
						password: this.loginForm.password
					});
					
					const res = await authAPI.login({
						username: this.loginForm.username,
						password: this.loginForm.password
					});
					
					
					if (res.data.code === 1) {
						// 登录成功
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						});
						
						// 存储用户信息、用户ID和token
						const userinfo = {
							username: this.loginForm.username,
							id: res.data.data ? res.data.data.id : '', // 存储用户ID
							token: res.data.data ? res.data.data.token : '', // 存储token
							// 其他用户相关信息
							...(res.data.data || {}) // 展开用户信息对象
						};
						
						uni.setStorageSync('userinfo', userinfo);
						uni.setStorageSync('userId', res.data.data.id);
						uni.setStorageSync('token', res.data.data.token);

						// 延迟跳转以显示提示
						setTimeout(() => {
							// 登录成功后进入首页
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}, 1000);
					} else {
						// 登录失败
						uni.showToast({
							title: res.data.message || res.data.msg || '登录失败',
							icon: 'none'
						});
					}
				} catch (err) {
					console.error('登录请求失败:', err);
					uni.showToast({
						title: '网络请求失败: ' + (err.errMsg || err.message || '未知错误'),
						icon: 'none',
						duration: 3000
					});
				}
			},
			// 跳转到注册页面
			goToRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				});
			}
		}
	}
</script>

<style>
	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 96vh;
		padding: 0 40rpx;
		box-sizing: border-box;
	}
	
	.login-form {
		width: 100%;
		background-color: #fff;
		padding: 40rpx;
		border-radius: 10rpx;
	}
	
	.form-title {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
	}
	
	.form-item {
		margin-bottom: 30rpx;
	}
	
	.form-input {
		width: 76%;
		height: 80rpx;
		border: 1rpx solid #333333;
		border-radius: 10px;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
        margin-left: 12%;
        box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
	}
	
    .register-text{ 
        text-align: right;
        margin-left: 12%;
        margin-top: 2%;
        width: 76%;
		cursor: pointer;
        margin-bottom: 30rpx;
    }

	.login-button {
		width: 76%;
		height: 100rpx;
		background-color: #333333;
		color: #fff;
		border-radius: 30rpx;
		font-size: 34rpx;
        display: flex;
        justify-content: center;
        align-items: center;
	}

    .else-login{
        text-align: center;
        margin-top: 10%;
        width: 100%;
        color: #737373;
    }
     .else-login-wx{ 
        text-align: center;
        margin-top: 5%;
        width: 100%;
        color: #737373;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .else-login-wx image{
        width: 60rpx;
        height: 60rpx;
    }
</style>